<script>
import ImageCropper from "../ImageEdit/index.vue";
import TXSelect from '../TXSelect/index.vue'
import { BubbleMenu as BubbleMenuComp } from '@tiptap/vue-3'
import Commands from '../../utils/handler.js'
export default {
  name: "index",
  components: {
    ImageCropper,
    TXSelect,
    BubbleMenuComp
  },
  props: {
    editor: {
      type: Object,
      required: true
    },
    handleImageUpload: {
      type: Function
    },
    handleVideoUpload: {
      type: Function
    },
  },
  data () {
    return {
      commands: new Commands(this.editor),
      insertOption: [
        { value: 0, title: '在上方插入行' },
        { value: 1, title: '在下方插入行' },
        { value: 2, title: '在左侧插入列' },
        { value: 3, title: '在右侧插入列' }
      ],
      deleteOption: [
        { value: 0, title: '删除列' },
        { value: 1, title: '删除行' },
        // { value: 2, title: '在左侧插入列' },
        // { value: 3, title: '在右侧插入列' }
      ]
    }
  },
  methods: {
    getSelectionType () {
      return this.editor.state.selection.node && this.editor.state.selection.node.type.name
    },
    getNodeName () {
      return this.editor.state.selection.$from.node().type.name
    },
    // 插入行或列
    handleInsertRowOrCol (row) {
      switch (row.value) {
        // 在上方插入行
        case 0: {
          this.commands.getCommands().addRowBefore()
          break
        }
        // 在下方插入行
        case 1: {
          this.commands.getCommands().addRowAfter()
          break
        }
        // 在左侧插入列
        case 2: {
          this.commands.getCommands().addColumnBefore()
          break
        }
        // 在右侧插入列
        case 3: {
          this.commands.getCommands().addColumnAfter()
          break
        }
      }
    },
    // 删除行或列
    handleDeleteRowOrCol (row) {
      switch (row.value) {
        // 删除列
        case 0: {
          this.commands.getCommands().deleteColumn()
          break
        }
        // 删除行
        case 1: {
          this.commands.getCommands().deleteRow()
          break
        }
        //
        // case 2: {
        //   this.commands.getCommands().addColumnBefore()
        //   break
        // }
        //
        // case 3: {
        //   this.commands.getCommands().addColumnAfter()
        //   break
        // }
      }
    },
    mergeCells () {
      this.commands.getCommands().mergeCells()
    },
    splitCell () {
      this.commands.getCommands().splitCell()
    }
  }
}
</script>

<template>
  <bubble-menu-comp
      :editor="editor"
      :tippy-options="{ duration: 300, maxWidth: 600, placement: 'bottom-start' }"
      v-if="editor"
  >
    <div class="tx-bubble-menu">
      <!-- 图片操作 -->
      <template v-if="getNodeName() === 'image'">
        <button @click="commands.insertOrReplaceImage(handleImageUpload)">替换图片</button>
        <!-- 编辑图片 -->
        <ImageCropper :editor="editor" @save="(e) => commands.handleFileChange(e, handleImageUpload)" />
      </template>
      <template v-if="getNodeName() === 'tableCell' || getNodeName() === 'tableHeader'">
        <TXSelect title="插入" :options="insertOption" @select="handleInsertRowOrCol"/>
        <TXSelect title="删除" :options="deleteOption" @select="handleDeleteRowOrCol"/>
        <div class="tx-icon" @click="mergeCells">合并单元格</div>
        <div class="tx-icon" @click="splitCell">拆分单元格</div>
      </template>
      <template v-else>
        <div class="tx-icon" @click="commands.clearFormat" title="清除格式">
          <i class="iconfont icon-qingchugeshi"></i>
        </div>
        <div class="tx-icon" :class="{'is-active': editor.isActive('bold')}" @click="commands.toggleBold()" title="加粗">B</div>
        <div class="tx-icon" :class="{'is-active': editor.isActive('italic')}" @click="commands.toggleItalic()" title="倾斜">I</div>
        <div class="tx-icon" :class="{'is-active': editor.isActive('underline')}" @click="commands.toggleUnderline()" title="下划线">U</div>
      </template>
      <template v-if="getSelectionType() === 'table'">
        <div class="tx-icon" :class="{'is-active': editor.isActive({'data-align': 'left'})}" @click="commands.handleTableAlign('left')" title="左对齐">
          <i class="iconfont icon-caozuo_duiqifangshi_zuoduiqi"></i>
        </div>
        <div class="tx-icon" :class="{'is-active': editor.isActive({'data-align': 'center'})}" @click="commands.handleTableAlign('center')" title="居中">
          <i class="iconfont icon-caozuo_duiqifangshi_juzhongduiqi"></i>
        </div>
        <div class="tx-icon" :class="{'is-active': editor.isActive({'data-align': 'right'})}" @click="commands.handleTableAlign('right')" title="右对齐">
          <i class="iconfont icon-caozuo_duiqifangshi_youduiqi"></i>
        </div>
      </template>
      <template v-else>
        <div class="tx-icon" :class="{'is-active': editor.isActive({textAlign: 'left'})}" @click="commands.handleAlign('left')" title="左对齐">
          <i class="iconfont icon-caozuo_duiqifangshi_zuoduiqi"></i>
        </div>
        <div class="tx-icon" :class="{'is-active': editor.isActive({textAlign: 'center'})}" @click="commands.handleAlign('center')" title="居中">
          <i class="iconfont icon-caozuo_duiqifangshi_juzhongduiqi"></i>
        </div>
        <div class="tx-icon" :class="{'is-active': editor.isActive({textAlign: 'right'})}" @click="commands.handleAlign('right')" title="右对齐">
          <i class="iconfont icon-caozuo_duiqifangshi_youduiqi"></i>
        </div>
        <div class="tx-icon" :class="{'is-active': editor.isActive({textAlign: 'justify'})}" @click="commands.handleAlign('justify')" title="水平对齐">
          <i class="iconfont icon-caozuo_duiqifangshi_shuipingduiqi"></i>
        </div>
      </template>
    </div>
  </bubble-menu-comp>
</template>

<style scoped lang="less">
@import '../../css/index';
</style>